<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="white">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.wrap{
				width: 100%;
				font-family: "宋体";
				font-size: 1.5em;
			}
			.header{
				background: #3B95FA;
				width: 100%;
				padding: 20px 0;
			}
			.header img{
				width: 80px;
				float: left;
				margin: 20px 0 0 20px;
			}
			.header p{
				text-align: center;
				font-size: 2em;
				color: white;
				padding: 10px;
			}
			.search{
				border-bottom: 1px solid #cdcdcd;
				padding: 10px 0;
				text-align: center;
			}
			.search #expressID{
				border: 1px solid #CDCDCD;
				width: 80%;
				border-radius: 5px 0 0 5px;
				font-size: 1.5em;
				padding: 20px 0 20px 20px;
			}
			.search #chatch{
				background: dodgerblue;
				border-radius: 0 5px 5px 0;
				color: white;
				font-size: 1.5em;
				padding: 20px 20px;
				border: none;
			}
			.main .content label{
				display: inline-block;
				width: 200px;
				font-size: 1.5em;
				text-align: left;
				margin: 10px ;
			}
			.main .state{
				color: red;
				margin: 10px;
			}
			.main .content{
				border-bottom: 1px solid #CDCDCD;
				padding:20px ;
			}
			.main .content span{
				margin-left: 30px;
				color: gray;
				font-size: 1.2em;
			}
			.main .content .last{
				width: 150px;
				border: 1px solid orangered;
				border-radius: 50px;
				color: orangered;
				text-align: center;
				padding: 20px;
				font-size: 1.2em;
			}
			.bottom{
				width: 100%;
				display: inline-block;
				position: relative;
				bottom: 0px;
			    color: gray;
			    font-size: 1.5em;
				border-top: 1px solid #CDCDCD;
			}
			.bottom ul li{	
				float: left;
				list-style:none;
				width: 15%;
				margin: 20px 23px;
				text-align: center;
			}
			.bottom .myexpress{
				color: #f95905;
			}
			.bottom ul li img{
				width: 100%;
				height: 150px;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="header">
				<img src="img/通话.png"/>
				<p>我的快递</p>
			</div>
			<div class="search">
				<input type="text" name="expressID" id="expressID" value="" placeholder="请输入快递号搜索" />
				<input type="button" name="" id="chatch" value="搜索" />
			</div>
			<div class="main">
				<div class="content">
					<p><label>快递单号：</label><span>73638296292646</span></p>
					<p><label>收件人：</label><span>张 三</span></p>
					<p><label>手机号：</label><span>13586686448</span></p>
					<p class="last">村通未签收</p>
				</div>
				<div class="content">
					<p><label>快递单号：</label><span>73638296292646</span></p>
					<p><label>收件人：</label><span>张 三</span></p>
					<p><label>手机号：</label><span>13586686448</span></p>
					<p class="last">村通未签收</p>
				</div>
				<div class="content">
					<p><label>快递单号：</label><span>73638296292646</span></p>
					<p><label>收件人：</label><span>张 三</span></p>
					<p><label>手机号：</label><span>13586686448</span></p>
					<p class="last">村通未签收</p>
				</div>
				<div class="content">
					<p><label>快递单号：</label><span>73638296292646</span></p>
					<p><label>收件人：</label><span>张 三</span></p>
					<p><label>手机号：</label><span>13586686448</span></p>
					<p class="last">村通未签收</p>
				</div>
				<div class="content">
					<p><label>快递单号：</label><span>73638296292646</span></p>
					<p><label>收件人：</label><span>张 三</span></p>
					<p><label>手机号：</label><span>13586686448</span></p>
					<p class="last">村通未签收</p>
				</div>
			</div>
			<div class="bottom">
				<ul>
					<li><img src="img/首页.png"/><p>首页</p></li>
					<li><img src="img/邮件 (1).png"/><p>收件箱</p></li>
					<li><img src="img/朋友 (1).png"/><p>亲朋好友</p></li>
					<li><img src="img/快递 (3).png"/><p class="myexpress">我的快递</p></li>
					<li><img src="img/更多 (1).png"/><p>更多</p></li>
				</ul>
			</div>
		</div>
	</body>
</html>
